<template>
  <div class="popup">
    <div class="top_button" @click="close"></div>
    <div class="title_warp">
      <div class="left">
        <img v-if="props.icon" class="icon" :src="props.icon" alt="">
        <div class="name">{{ title || 123123 }}</div>
      </div>
      <div v-if="props.showClose" class="close" @click="close">
        <div class="button"></div>
      </div>
      <div v-else></div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: String,
  icon: {},
  showClose: {
    default () {
      return true
    }
  }
})

const emits = defineEmits (['close'])

const close = () => {
  emits('close');
}
</script>

<style lang="scss" scoped>
.popup {
  width: 100%;
  background: #FFFFFF;
  border-radius: 0.36rem 0.36rem 0rem 0rem;
  z-index: 100000;
  padding: 0.22rem 0.32rem 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

.top_button {
  width: 0.8rem;
  height: 0.12rem;
  background: #D8D8D8;
  border-radius: 0.06rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.1rem;
}

.title_warp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.32rem;

  .left {
    display: flex;
    align-items: center;

    .icon {
      height: 0.32rem;
      width: 0.32rem;
      margin-right: 0.16rem;
    }

    .name {
      font-size: 0.32rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #242424;
      line-height: 0.44rem;
    }
  }


  .close {
    height: 0.24rem;
    width: 0.24rem;
    background-image: url("~@/assets/img/close.png");
    background-size: contain;
    position: relative;
    .button {
      position: absolute;
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%);
      height: 0.5rem;
      width: 0.5rem;
    }
  }
}

</style>